<template>
	<view class="app_Cont">
		<view class="showCont" v-if="showCont">
			<view class="bannerCont">
				 <u-swiper
				 height="250"
					:list="bannerArr"
					indicator
					indicatorMode="line"
					circular
				></u-swiper>
			</view>
			<view class="headCard">
				<view class="headName">
					<view>{{formData.accreditation_name}}</view>
					<view class="priceCont">¥{{formData.accreditation_money}}</view>
				</view>
				<view class="headDes">预计：{{formData.accreditation_czsj}}出证</view>
			</view>
			<view class="cardItem">
				<view class="cardHead">适用船员范围</view>
				<view class="cardInfo textWrap">
					{{getInfoText(formData.accreditation_sycyfw)}}
				</view>
			</view>
			<view class="cardItem">
				<view class="cardHead">办理要求</view>
				<view class="cardInfo textWrap">
					{{getInfoText(formData.accreditation_blyq)}}
				</view>
			</view>
			<view class="cardItem">
				<view class="cardHead">所需材料</view>
				<view class="cardInfo textWrap">
					{{getInfoText(formData.accreditation_sxcl)}}
				</view>
			</view>
			
			
			<view class="cardItem">
				<view class="cardHead">取证方式</view>
				<view class="cardInfo textWrap">
					{{getInfoText(formData.accreditation_qzfs)}}
				</view>
			</view>
			
			<view class="cardItem">
				<view class="cardHead">售后规则</view>
				<view class="cardInfo">
					<view>
						除下述情况外，出证失败费用全返:
					</view>
					<view>(1)开班前5个工作日及以上(含第5日)，可无条件改期或全额退款:</view>
					<view>
						1.平台向海事局提交申报后，您或公司自行撤销申报，或被海事局驳回后不提供资料;
					</view>
					<view>
						2.资历存疑被海事局退单:
					</view>
					<view>
						3.平台协助您完成了资历维护;
					</view>
					<view>
						4.遗失补办时，中途找回证书或证书被扣押,
					</view>
				</view>
			</view>
			<view class="underFlex">
				<view class="underPrice">¥{{formData.accreditation_money}}</view>
				<view class="ctrlGroup">
					<view @click="telFn"  class="ctrlBtn">电话咨询</view>
					<view class="ctrlBtn has_bg" @click="signFn">立即报名</view>
				</view>
			</view>
		</view>
		<load v-if="!showCont"></load>
	</view>
</template>

<script>
	import converData from "@/utils/converData";
	import api from '@/http/api.js'
	import load from '@/components/load.vue'
	export default {
		components:{load},
		data() {
			return {
				detailId:'',
				showCont:false,
				getInfoText:converData.changeLine,
				bannerArr:[],
				formData:{},
				share:{
				   title: '鲸领航系统分享',
				   imageUrl:'https://whalenav.oss-cn-chengdu.aliyuncs.com/uploads/images/20241211/bde6c10f267dca4630622686023ae395bf821eba.jpg',
				}
			};
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.share.title,
				imageUrl: this.share.imageUrl,
			}
		},
		onShareTimeline(res) {//分享到朋友圈
			return {
				title: this.share.title,
				imageUrl: this.share.imageUrl,
			}
		},
		methods:{
			signFn(){
				uni.navigateTo({
					url: '../obtainSign/obtainSign?id='+this.detailId+'&money='+this.formData.accreditation_money
				})
			},
			telFn(){
				uni.makePhoneCall({
					phoneNumber:this.formData.accreditation.accreditation_mobile,
				})
			},
			getData(){
				let data = {
					accreditation_content_id:this.detailId,
				}
				api.getRequst(data,'/api/accreditation/details').then((res)=>{
					if(res.code==1){
						this.formData = res.data
						this.bannerArr = res.data.accreditation_banner.split(',')
						this.share.title =res.data.accreditation_name+"|"+res.data.accreditation_money
					
					}
					this.showCont = true
				})
			}
		},
		onLoad(option) {
			this.detailId = option.id
			this.getData()
		},
		
	}
</script>

<style lang="scss">
	.showCont{
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #f6f7f9;
		padding-bottom: 140rpx;
		.bannerCont{
			
		}
		.headCard{
			width: 100%;
			position: relative;
			margin-top: -30rpx;
			z-index: 2;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			padding: 30rpx 4% 30rpx;
			box-sizing: border-box;
			.headName{
				font-size: 30rpx;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				.priceCont{
					color: #ff5757;
					font-size: 36rpx;
					font-weight: normal;
				}
			}
			.headDes{
				color: #666;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
			
			.navCont{
				display: flex;
				padding: 40rpx 4% 0;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				box-sizing: border-box;
				.navItem{
					color: #000;
					text-align: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					.activeLine{
						width: 60rpx;
						margin-top: 10rpx;
						height: 6rpx;
						border-radius: 6rpx;
						background-color: #fff;
					}
				}
				.navActive{
					color: #3f55cc;
					.activeLine{
						background-color: #3f55cc;
					}
				}
			}
		}
		.cardItem{
			width: 92%;
			margin: 30rpx auto;
			background-color: #fff;
			padding: 30rpx 4%;
			box-sizing: border-box;
			border-radius: 20rpx;
			.cardHead{
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.cardInfo{
				color: #333;
				font-size: 24rpx;
			}
		}
		.companyCont{
			padding: 30rpx;
			width: 92%;
			margin: 0 auto;
			margin-bottom: 30rpx;
			background-image: linear-gradient(to right,#5f80db,#3f55cc);
			color: #fff;
			border-radius: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.comImg{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #fff;
				font-size: 0;
				padding: 5rpx;
				overflow: hidden;
				box-sizing: border-box;
				margin-right: 30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.comInfo{
				flex: 1;
				width: 100rpx;
				.comName{
					width: 100%;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 32rpx;
					font-weight: bold;
				}
				.comText{
					color: #fff;
					margin-top: 10rpx;
				}
			}
			.telBtn{
				padding: 10rpx 20rpx;
				font-size: 24rpx;
				border-radius: 6rpx;
				border: 1px solid #fff;
				margin-left: 10rpx;
			}
		}
		.underFlex{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			padding: 30rpx 4%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.underPrice{
				color: #ff5757;
				font-size: 40rpx;
				margin-right: 30rpx;
			}
			.ctrlGroup{
				flex: 1;
				width: 100rpx;
				display: flex;
				margin-left: 30rpx;
				align-items: center;
				justify-content: space-between;
				.ctrlBtn{
					width: 48%;
					text-align: center;
					box-sizing: border-box;
					padding: 20rpx;
					font-size: 24rpx;
					// background-color: #f8f8f8;
					border: 1px solid #3f55cc;
					color: #3f55cc;
					border-radius: 10rpx;
				}
				.fullBtn{
					width: 100%;
				}
				.has_bg{
					border: none;
					padding: 22rpx ;
					// background-color: #3f55cc;
					background-image: linear-gradient(to right bottom,#9ecffd,#3f55cc);
					color: #fff;
				}
			}
		}
	}
</style>
